<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<!-- <view class="back iconfont icon-xiangzuo1" @tap="backPage"></view> -->
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">车界网</view>
		</view>
		<view class="bg_box">
			<image class="bg01" :src="getImgSrc('/static/bg05.png')" mode="widthFix"></image>
			<view class="bg_content">
				<view class="name_box">
					<view class="avatar">
						<image :src="avatar" mode="scaleToFill" @click="gotopage" :data-url="'/pages/personalcenter/settings/profile'"></image>
						<!-- <view class="a02">
						   修改
						</view> -->
					</view>
					<view class="name_text">
						<view class="name" @click="gotopage" :data-url="'/pages/personalcenter/settings/profile'">{{nickname}}</view>
						<view class="realname">
							<view class="real" >
								<view class="t" v-if="is_sm==0" :data-url="'/pages/personalcenter/standing?phone='+phone" @click="gotopage">去实名</view>
								<view class="t" v-if="is_sm==1">已申请</view>
								<view class="t" v-if="is_sm==2">已实名</view>
								<view class="r iconfont icon-xiangyou1"></view>
							</view>
						</view>
					</view>
					<view class="message" :data-url="'/pages/personalcenter/message'" @click="gotopage">
						<view class="icon iconfont icon-xiaoxi"></view>
						<!-- <view class="round"></view> -->
					</view>
				</view>

				<!-- <view class="menu_box">
					<view class="menu" data-url="" @click="gotopage">
						<view class="num">2</view>
						<view class="text">车辆在还(笔)</view>
					</view>
					<view class="menu" data-url="" @click="gotopage">
						<view class="num">1</view>
						<view class="text">逾期次数(次)</view>
					</view>
					<view class="menu" data-url="" @click="gotopage">
						<view class="num">328000</view>
						<view class="text">申请金额(元)</view>
					</view>
				</view> -->
				
				<view class="vip_box" :data-url="'/pages/personalcenter/member/member'" @click="gotopage">
					<image class="bg17" :src="getImgSrc('/static/bg17.png')" mode="widthFix"></image>
					<view class="vip_content">
						<view class="vip_text">
							<view class="title">
								<view class="t" v-if="is_vip == 0">普通用户</view>
								<view class="t" v-if="is_vip == 1">VIP会员</view>
								<view class="i">
									<image src="../../static/vip01.png" mode="widthFix"></image>
								</view>
							</view>
							<view class="text" v-if="is_vip == 0">您还未成为车界网vip会员</view>
							<!-- <view class="text" v-if="is_vip == 1">您已成为车界网vip会员</view> -->
							<view class="text" v-if="is_vip == 1">有效期至：{{vip_date}}</view>
						</view>
						<view class="vip_menu" v-if="is_vip == 0">去开通</view>
						<view class="vip_menu" v-if="is_vip == 1">去续费</view>
					</view>
				</view>

				<view class="apply_box">
					<view class="title_box">
						<view class="title">添加小程序到桌面<span>（与微信使用互不影响）</span></view>
						<view class="arrow" :data-url="'/pages/personalcenter/desk'" @click="gotopage">
							<view class="i iconfont icon-tianjia"></view>
							<view class="t">添加</view>
						</view>
					</view>
					<view class="apply_menu">
						<!-- <view class="menu" :data-url="'/pages/personalcenter/collect'" @click="gotopage">
							<view class="icon">
								<image src="../../static/menu/menu09.png" mode="widthFix"></image>
							</view>
							<view class="text">我的收藏</view>
						</view> -->
						<view class="menu" :data-url="'/pages/circle/my_circle?index=1'" @click="gotopage">
							<view class="icon">
								<image src="../../static/menu/menu10.png" mode="widthFix"></image>
							</view>
							<view class="text">朋友圈车源</view>
						</view>
						<view class="menu" :data-url="'/pages/service/source'" @click="gotopage">
							<view class="icon">
								<image src="../../static/menu/menu11.png" mode="widthFix"></image>
							</view>
							<view class="text">我的车源</view>
						</view>
						<view class="menu" :data-url="'/pages/service/request'" @click="gotopage">
							<view class="icon">
								<image src="../../static/menu/menu12.png" mode="widthFix"></image>
							</view>
							<view class="text">我的求购</view>
						</view>
						<view class="menu" :data-url="'/pages/service/shop'" @click="gotopage">
							<view class="icon">
								<image src="../../static/menu/menu19.png" mode="widthFix"></image>
							</view>
							<view class="text">我的店铺</view>
						</view>
					</view>
				</view>

				<!-- <view class="list_box">
					<view class="list" :data-url="'/pages/personalcenter/appoint/appoint'" @click="gotopage">
						<view class="icon">
							<image src="../../static/menu/menu03.png" mode="widthFix"></image>
						</view>
						<view class="title">约定履约</view>
						<view class="text">最近履约日 </view>
						<view class="time">2024.04.16</view>
						<view class="arrow iconfont icon-xiangyou1"></view>
					</view>
					<view class="list" :data-url="'/pages/personalcenter/car/car'" @click="gotopage">
						<view class="icon">
							<image src="../../static/menu/menu01.png" mode="widthFix"></image>
						</view>
						<view class="title">我的爱车</view>
						<view class="arrow iconfont icon-xiangyou1"></view>
					</view>
					<view class="list" :data-url="'/pages/personalcenter/bank/bank'" @click="gotopage">
						<view class="icon">
							<image src="../../static/menu/menu04.png" mode="widthFix"></image>
						</view>
						<view class="title">我的账户</view>
						<view class="arrow iconfont icon-xiangyou1"></view>
					</view>
					<view class="list" :data-url="'/pages/personalcenter/trading'" @click="gotopage">
						<view class="icon">
							<image src="../../static/menu/menu13.png" mode="widthFix"></image>
						</view>
						<view class="title">交易记录</view>
						<view class="arrow iconfont icon-xiangyou1"></view>
					</view>				
				</view> -->

				<view class="list_box">
					<!-- <view class="list">
						<view class="icon">
							<image src="../../static/menu/menu19.png" mode="widthFix"></image>
						</view>
						<view class="title">我的店铺</view>
						<view class="text">分享微店给好友</view>
						<view class="arrow iconfont icon-xiangyou1"></view>
					</view> -->
					<view class="list" :data-url="'/pages/personalcenter/collect?is_vip='+is_vip" @click="gotopage">
						<view class="icon">
							<image src="../../static/menu/menu09.png" mode="widthFix"></image>
						</view>
						<view class="title">我的收藏</view>
						<view class="arrow iconfont icon-xiangyou1"></view>
					</view>
					<view class="list" :data-url="'/pages/personalcenter/view'" @click="gotopage">
						<view class="icon">
							<image src="../../static/tabbar/my01.png" mode="widthFix"></image>
						</view>
						<view class="title">我的浏览</view>
						<view class="arrow iconfont icon-xiangyou1"></view>
					</view>
					<view class="list" :data-url="'/pages/index/service_log?stype=-1'" @click="gotopage">
						<view class="icon">
							<image src="../../static/menu/order01.png" mode="widthFix"></image>
						</view>
						<view class="title">我的订单</view>
						<view class="arrow iconfont icon-xiangyou1"></view>
					</view>
					<view class="list" @click="contract">
						<view class="icon">
							<image src="../../static/menu/menu14.png" mode="widthFix"></image>
						</view>
						<view class="title">我的客服</view>
						<view class="arrow iconfont icon-xiangyou1"></view>
					</view>
					<view class="list" :data-url="'/pages/personalcenter/settings/settings'" @click="gotopage">
						<view class="icon">
							<image src="../../static/menu/menu15.png" mode="widthFix"></image>
						</view>
						<view class="title">系统设置</view>
						<view class="arrow iconfont icon-xiangyou1"></view>
					</view>
				</view>

				<view class="clear_box03"></view>
			</view>
		</view>
	</view>
</template>

<script>
import { pathToBase64 } from '../../common/image-tools';
	export default {
		data() {
			return {
				page: 1,
				scrrol: false,
				info: '',
				avatar:'../../static/tx01.png',
				nickname:'',
				is_sm:0,
				is_vip:0,
				phone:'',
				plat_phone:'',
				x_phone:'',
				vip_date:'',
				plat_phone_arr:[],
			}
		},
		onLoad() {
			this.loadData();
			this.loadInfo();
		},
		onShow() {
			let is_edit = uni.getStorageSync('info_edit');
			if (is_edit){
				uni.removeStorageSync('info_edit');
				this.loadData();
			}
			uni.$on('login_out', (data) => {
				if (data){
					this.is_vip = 0;
					this.is_sm = 0;
					this.nickname= '';
					this.avatar= '../../static/tx01.png';
				}
			})
		},
		methods: {
			loadData() {
				let that = this;
				that.Net._get('auth/member/get_info', {}, res => {
					if (res.code == 1) {
						that.info = res.data;
						that.avatar = res.data.headimg;
						that.nickname = res.data.nickname;
						that.is_sm = res.data.is_sm;
						that.is_vip = res.data.is_vip;
						that.phone = res.data.phone;
						// that.plat_phone = res.data.plat_phone;
						that.x_phone = res.data.x_phone;
						that.vip_date = res.data.vip_date;
					}
				});
			},
			loadInfo() {
				let that = this;
				that.Net._get('other/sys_info', {}, res => {
					if (res.code == 1) {
						that.plat_phone = res.data.plat_phone;
						that.plat_phone_arr = res.data.plat_phone_arr;
					}
				});
			},
			contract(){
				let that = this;
				let token = uni.getStorageSync('_TOKEN_');
				if (!token) {
					uni.showModal({
					    title: '温馨提示',
					    content: '您还未登录，请先登录',
						cancelText:'暂不登录',
						confirmText:'去登录',
					    success: function (res) {
					        if (res.confirm) {
								uni.navigateTo({
									url: '/pages/public/login'
								});
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					            // 用户点击了取消按钮的相关逻辑可以放在这里
					        }
					    }
					})
					return '';
				}
				uni.showModal({
				    title: '联系客服',
				    content: that.plat_phone,
					confirmText:'拨打',
				    success: function (res) {
				        if (res.confirm) {
							const phone = that.plat_phone_arr[0]
							uni.makePhoneCall({
								phoneNumber: phone //仅为示例
							});
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				            // 用户点击了取消按钮的相关逻辑可以放在这里
				        }
				    }
				})
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let that = this;
				let token = uni.getStorageSync('_TOKEN_');
				if (!token) {
					uni.showModal({
					    title: '温馨提示',
					    content: '您还未登录，请先登录',
						cancelText:'暂不登录',
						confirmText:'去登录',
					    success: function (res) {
					        if (res.confirm) {
								uni.navigateTo({
									url: '/pages/public/login'
								});
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					            // 用户点击了取消按钮的相关逻辑可以放在这里
					        }
					    }
					})
					return '';
				}else{
					let url = e.currentTarget.dataset.url;
					uni.navigateTo({
						url: url
					});
				}
			},
			gotopage02(e) {
				let url = e.currentTarget.dataset.url;
				uni.switchTab({
					url: url
				});
			},

		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
		onReachBottom() {
			var that = this;
			that.page++;
			// that.Net._get('shop_goods', {per_page:'10',page:that.page,}, res => {
			//   if (res.code == 200) {
			//     //console.log(res)
			//     if (res.data.data == '') {
			//       uni.showToast({
			//         title: '已经是最后一页了',
			//         duration: 2000,
			//         icon: 'none'
			//       });
			//     } else {
			//       that.info = that.info.concat(res.data.data); //将数据拼接在一起
			//     }
			//   } else if (res.code == 0) {
			//     that.Msg.Success(res.msg, res => {});
			//   }
			// });
		},
	}
</script>

<style>
	.header {
		background-color: transparent !important;
		background-color: #FC5D20 !important;
		height: 20vw !important;
	}

	.header .text {
		background-color: transparent !important;
	}

	.scrrolHeader {
		background-color: #FC5D20 !important;
	}

	.bg_box {
		width: 100%;
		position: relative;
	}

	.bg_box .bg01 {
		width: 100%;
	}

	.bg_box .bg_content {
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 98;
	}

	.name_box {
		width: 100%;
		margin-top: 4%;
		display: flex;
		align-items: center;
	}

	.name_box .avatar {
		width: 18vw;
		height: 18vw;
		margin-right: 4%;
		margin-left: 4%;
		background-color: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.name_box .avatar image {
		width: 90%;
		height: 90%;
		border-radius: 50%;
	}

	.name_box .name_text {
		flex: 1;
	}

	.name_box .name_text .name {
		font-size: 5vw;
		color: #333;
		font-weight: bold;
	}

	.name_box .name_text .realname {
		margin-top: 2vw;
		display: flex;
	}

	.name_box .name_text .realname .real {
		height: 7vw;
		padding: 0 2vw 0 3vw;
		border-radius: 7vw;
		background-color: #FC5D20;
		display: flex;
		align-items: center;

	}

	.name_box .name_text .realname .real .t {
		font-size: 3vw;
		color: #fff;
		margin-right: 0.5vw;
	}

	.name_box .name_text .realname .real .r {
		font-size: 2.7vw;
		color: #fff;
	}

	.name_box .message {
		position: relative;
		margin-right: 4%;
	}

	.name_box .message .icon {
		font-size: 8vw;
		color: #333;
	}

	.name_box .message .round {
		height: 3vw;
		width: 3vw;
		box-sizing: border-box;
		border-radius: 50%;
		text-align: center;
		position: absolute;
		right: 0vw;
		top: 0;
		background-color: #FC5D20;
		color: #fff;
	}

	.menu_box {
		width: 100%;
		margin: 0 auto;
		display: flex;
		padding: 6vw 0;
		border-radius: 2vw;
		margin-top: 4%;
		background-color: #fff;
		border-radius: 3vw;
	}

	.menu_box .menu {
		flex: 1;
	}

	.menu_box .menu .num {
		font-size: 5vw;
		font-weight: bold;
		color: #1d1f24;
		text-align: center;
	}

	.menu_box .menu .text {
		font-size: 3.2vw;
		color: #7C8191;
		text-align: center;
		margin-top: 1vw;
	}

	.apply_box {
		background-color: #FC5D20;
		padding: 1px;
		border-radius: 3vw;
		margin-top: 4%;
	}

	.apply_box .title_box {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 4vw;
		height: 13vw;
	}

	.apply_box .title_box .title {
		font-size: 3.8vw;
		color: #fff;
		font-weight: bold;
		flex: 1;
	}
	
	.apply_box .title_box .title span{
		font-size: 3vw;
	}

	.apply_box .title_box .arrow {
		background-color: #D64F1B;
		height: 8vw;
		padding: 0 2vw 0 3vw;
		border-radius: 2vw;
		display: flex;
		align-items: center;
	}

	.apply_box .title_box .arrow .i {
		font-size: 5vw;
		color: #fff;
		margin-right: 1vw;
	}

	.apply_box .title_box .arrow .t {
		font-size: 3.2vw;
		color: #fff;
		margin-right: 1vw;
	}

	.apply_box .title_box .arrow .a {
		font-size: 3vw;
		color: #fff;
	}

	.apply_box .apply_menu {
		width: 100%;
		border-radius: 3vw;
		padding: 4vw 0;
		background-color: #fff;
		display: flex;
		align-items: center;
	}

	.apply_box .apply_menu .menu {
		flex: 1;
	}

	.apply_box .apply_menu .menu .icon {
		width: 8vw;
		margin: 0 auto;
	}

	.apply_box .apply_menu .menu .icon image {
		width: 100%;
	}

	.apply_box .apply_menu .menu .text {
		font-size: 3.2vw;
		color: #2A3141;
		margin-top: 1.5vw;
		text-align: center;
	}
	
	.apply_box .apply_menu .menu:nth-child(2) .text{
		margin-top: 3vw;
	}

	.list_box {
		margin-top: 4%;
		background-color: #fff;
		padding: 2% 4%;
		border-radius: 3vw;
	}

	.list_box .list {
		width: 100%;
		height: 14vw;
		display: flex;
		align-items: center;
	}

	.list_box .list .icon {
		width: 6vw;
		margin-right: 3vw;
	}

	.list_box .list .icon image {
		width: 100%;
	}

	.list_box .list .title {
		font-size: 4vw;
		color: #333;
		font-weight: bold;
		margin-right: 3vw;
		flex: 1;
	}

	.list_box .list .text {
		font-size: 3.5vw;
		color: #7C8191;
	}

	.list_box .list .time {
		font-size: 3.5vw;
		color: #FC5D20;
	}

	.list_box .list .arrow {
		font-size: 3.5vw;
		color: #CCCDD4;
		margin-left: 2vw;
		text-align: right;
	}
	
	.vip_box{
		width: 100%;
		position: relative;
		margin-top: 4%;
	}
	
	.vip_box .bg17{
		width: 100%;
	}
	
	.vip_box .vip_content{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		padding: 0 4%;
	}
	
	.vip_box .vip_content .vip_text{
		flex: 1;
	}
	
	.vip_box .vip_content .vip_text .title{
		display: flex;
		align-items: center;
	}
	
	.vip_box .vip_content .vip_text .title .t{
		font-size: 4vw;
		color: #FFE7A1;
		font-weight: bold;
	}
	
	.vip_box .vip_content .vip_text .title .i{
		width: 5vw;
		margin-left: 1vw;
	}
	
	.vip_box .vip_content .vip_text .title .i image{
		width: 100%;
	}
	
	.vip_box .vip_content .vip_text .text{
		font-size: 3.5vw;
		color: #fff;
		margin-top: 1vw;
	}
	
	.vip_box .vip_content .vip_menu{
		height: 8vw;
		padding: 0 4vw;
		border-radius: 8vw;
		font-size: 3.5vw;
		color: #5E2808;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(to right, #FAE8CC, #E9B56E);
	}
	
	.a02{
		width: 8vw;
		position: absolute;
		right: 0;
		bottom: 0;
		color: #333; /* 文字颜色 */
		padding: 10px 20px; /* 文字内边距 */
		border-radius: 100px; /* 使用较大的border-radius来实现近似圆形 */
		background-color: rgba(170, 170, 170, 0.5);  
	}
	
	
</style>